﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/InsdepUI/plugin/echarts-4.0.2/echarts-4.0.2.min.js"></script>
</head>
<body>
    <div id="chartArchive" style="width:500px;height:500px;float:left">
    </div>
    <div id="chartArchive1" style="width:500px;height:500px;float:right">
    </div>
    <script type="text/javascript">

        $.ajax({
            url: '/ToJi/Get_ajaxArchivlist',
            type: 'post',
            asyns: false,
            dataType: 'text',
            cache: false,
            success: function (data) {
                var str = data;
                var array = str.split('|');
                var arrayName = array[0].split(',');
                var arrayCount = array[1].split(',');
                var myChart1 = echarts.init(document.getElementById('chartArchive1'));
                var option = {
                    title: {
                        x: 'center',
                        text: '档案分类统计',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: arrayName
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: 
                                [arrayCount
                            //    { value: 335, name: '直接访问' },
                            //    { value: 310, name: '邮件营销' },
                            //    { value: 234, name: '联盟广告' },
                            //    { value: 135, name: '视频广告' },
                            //    { value: 1548, name: '搜索引擎' }
                            ]
                        }
                    ]
                };
                myChart1.setOption(option);
            }
        })
        $.ajax({
            url: '/ToJi/Get_ajaxArchivlist',
            type: 'post',
            asyns: false,
            dataType: 'text',
            cache: false,
            success: function (data) {
                var str = data;
                var array = str.split('|');
                var arrayName = array[0].split(',');
                var arrayCount = array[1].split(',');
                ////基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('chartArchive'));

                //指定图表的配置项和数据
                var option = {
                    title: {
                        x: 'center',
                        text: '档案分类统计',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    grid: {
                        borderWidth: 0,
                        y: 80,
                        y2: 60
                    },
                    xAxis: [
                        {
                            type: 'category',
                            show: false,
                            data: arrayName
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            show: false
                        }
                    ],
                    series: [
                        {
                            name: '档案数',
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{b}\n{c}'
                                    }
                                }
                            },
                            data: arrayCount,
                            markPoint: {
                                tooltip: {
                                    trigger: 'item',
                                    backgroundColor: 'rgba(0,0,0,0)',
                                    formatter: function (params) {
                                        return '<img src="'
                                            + params.data.symbol.replace('image://', '')
                                            + '"/>';
                                    }
                                },
                                data: [
                                    { xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'image://../asset/ico/折线图.png' },
                                    { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'image://../asset/ico/柱状图.png' },
                                    { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'image://../asset/ico/散点图.png' },
                                    { xAxis: 3, y: 350, name: 'K', symbolSize: 20, symbol: 'image://../asset/ico/K线图.png' },
                                    { xAxis: 4, y: 350, name: 'Pie', symbolSize: 20, symbol: 'image://../asset/ico/饼状图.png' },
                                    { xAxis: 5, y: 350, name: 'Radar', symbolSize: 20, symbol: 'image://../asset/ico/雷达图.png' },
                                    { xAxis: 6, y: 350, name: 'Chord', symbolSize: 20, symbol: 'image://../asset/ico/和弦图.png' },
                                    { xAxis: 7, y: 350, name: 'Force', symbolSize: 20, symbol: 'image://../asset/ico/力导向图.png' },
                                    { xAxis: 8, y: 350, name: 'Map', symbolSize: 20, symbol: 'image://../asset/ico/地图.png' },
                                    { xAxis: 9, y: 350, name: 'Gauge', symbolSize: 20, symbol: 'image://../asset/ico/仪表盘.png' },
                                    { xAxis: 10, y: 350, name: 'Funnel', symbolSize: 20, symbol: 'image://../asset/ico/漏斗图.png' },
                                ]
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        })
    </script>
</body>
</html>
